<div class="page-title">
  <h2><?=$title?></h2>
</div>

  <table class="general">
    <thead>
      <tr>
        <th>Territory</th>
        <th><?php echo $region.', '.$cluster;?></th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Nama Team Leader</td>
        <td>
          <select name="dstl" class="dstl" id="dstl" >
            <option value="null">&mdash; Pilih DSTL &mdash;</option>
              <?php foreach ($dstl as $key) : ?>
                  <option value="<?php echo $key->user_id.';'.$key->user_group_id; ?>" ><?php echo $key->user_id.' | '.$key->user_name; ?></option>
              <?php endforeach; ?>
          </select>
        </td>
      </tr>

      <tr>
        <td>Nama Direct Sales</td>
        <td>
          <select name="ds_name" id="ds-name">
            <option value=''>&mdash; Pilih DS &mdash;</option>
              <?php foreach ($ds as $key) : ?>
                  <option value="<?php echo $key->user_id.';'.$key->user_group_id; ?>" ><?php echo $key->user_id.' | '.$key->user_name; ?></option>
              <?php endforeach; ?>
          </select> (Optional)
        </td>
      </tr>
      <tr>
        <td>Tipe Journey Cycle</td>
        <td>
          <select name="jc_type" id="jc-type">
            <option value="Kunjungan Agent/Mobsel">Kunjungan Agent/Mobsel</option>
            <option value="Pendampingan DS">Pendampingan DS</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Mobile Selling</td>
        <td>
          <input type="radio" value="2" name="agent_selling_type" id="ya" />
          <label for="ya">Ya</label>
          <input type="radio" value="1" name="agent_selling_type" id="tidak" checked="checked" />
          <label for="tidak">Tidak</label>
        </td>
      </tr>
      <tr>
        <td>Pilih Tanggal</td>
        <td><input type="text" readonly="readonly" class="datepicker" id="datepicker" value="<?php echo date('Y-m-j'); ?>"></td>
      </tr>
      <tr>
        <td>Agent</td>
        <td><input type="text" class="keyword" id="keyword" placeholder="Nama Agent/Lokasi Mobsel/ID Agent (Optional)" size="50"></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td><button id="show-jc">Tampilkan Jadwal</button></td>
      </tr>
    </tfoot>

  </table>
  
  <div class="clear"></div>
  <div class="humanized">
    
  </div>
  <div class="journey">
    <!-- the journey appeared here -->
  </div>
    
<script type="text/javascript">
$(document).ready(function() {
  $( "#datepicker" ).datepicker({
    showOn: "button", minDate: "0W",
    showWeek: true, dateFormat: 'yy-mm-d',
    buttonImage: "<?php echo base_url('file/images/table.png'); ?>",
    buttonImageOnly: true
  });
  // ================================================================================= //
  $('input, select').change( function() { $('.journey').empty(); });
  // ================================================================================= //

  $("button#show-jc").click(function(){
    $('.journey').html('');
    var ds      = $('select#ds-name').val();
    var dstl    = $('select#dstl').val();
    var jc_type = $('select#jc-type').val();
    var show_jc = true;

    if(dstl == 'null') { 
      alert('Anda belum memilih nama DSTL');
      var show_jc = false;
    }
    if(jc_type == 'Pendampingan DS' || ($('input:radio:checked').val() == '2' && ds == '') ) {
      if (ds == '' ) {
        alert('Anda tidak memilih nama DS');
        var show_jc = false;
      }
    }
    if(!$('#datepicker').val()) {
      alert('Tanggal tidak boleh kosong');
      var show_jc = false;
    }

    if(show_jc) {
      $.post(
        "<?php echo base_url('index.php/jc/journey_spv'); ?>",
        {sales_id:ds, spv_id:dstl, date:$('#datepicker').val(), jc_type:jc_type, keyword:$('input.keyword').val(), mobsel:$('input:radio:checked').val()},
        function(data) {
          var x = JSON.parse(data);
          $('.journey').html(x.journey_summary);
          // $('.humanized').html(x.humanized);
        }
      );
    }

  });

});

  function simpan(param) {
    var sales_name     = $('#ds-name').val().split(';');
    if(sales_name == '') { 
      var sales_id = $(':checkbox#'+param).parent().parent().attr('class');
    }
    else {
      var sales_id = sales_name[0];
    }    
    var id_attr      = param.split('_');
    var channel_id   = id_attr[0];
    var territory_id = id_attr[1];
    var yyyymm       = id_attr[2];
    var day          = id_attr[3];
    var jc_type      = $('#jc-type').val();
    var dstl         = $('#dstl').val().split(';');
    // var sales_id     = $(':checkbox#'+param).parent().parent().attr('class');
    var nilai        = $(':checkbox#'+param).is(':checked');

    // alert(sales_id);

    $.post(
      '<?=base_url("index.php/jc/save_jc/14")?>', 
      {user_id:dstl[0],channel_id:channel_id,territory_id:territory_id,month:yyyymm,day:day,nilai:nilai, jc_type:jc_type, sales_id:sales_id},
      function(data) {
        $(".pesan").html(data.messege).fadeIn(1000).fadeOut(1000);
      },
      "json"
    );
  }

</script>